<template>
  <div class="app-identity">
      <Navbar background=""></Navbar>
      <div class="head">
          <div class="title">实名认证</div>
          <div class="text">更加真实，更受欢迎</div>
      </div> 
      <div class="content">
          <div class="title">请您使用有效身份证信息认证</div>
          <div class="form">
              <div class="form-item">
                  <div class="label">真实姓名</div>
                  <input type="text" v-model="form.name" placeholder="请输入真实姓名" placeholder-style="font-size: 30rpx;font-weight: 400;color: #909399;">
              </div>
              <div class="form-item">
                  <div class="label">身份证号</div>
                  <input type="text" v-model="form.idCardNumber" placeholder="请输入身份证号码" placeholder-style="font-size: 30rpx;font-weight: 400;color: #909399;">
              </div>
              <div class="btn" @click="submit">立即认证</div>
              <div class="about">实名仅用于您是否为真人用户，不会对信息做任何采集与保留，请放心使用</div>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form:{
        name:"",
        idCardNumber:""
      }
    }
  },
  created(){
    this.$http.post('/user/user/info').then(res=>{
      console.log(res)
    })
  },
  methods: {
    submit(){
      if(!this.form.name){
        return uni.showToast({title:"请输入真实姓名",icon:"none"}) 
      }
      if(!this.form.idCardNumber){
        return uni.showToast({title:"请输入身份证号码",icon:"none"})
      }
      this.$http.post('/user/user/auth/info',this.form).then(res=>{
        console.log(res) 
        if(res.retObject.result=='0'){
          uni.showToast({title:"认证成功"})
        }else{
          uni.showToast({title:res.retObject.description,icon:"none"})
        }
       
      })
    }
  },
}
</script>
<style lang="scss" scoped>
  .app-identity{
    font-size: 28rpx;
    &>image{
      width: 100%;
      height: 706rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .head{
      padding:72rpx 60rpx 120rpx 60rpx;
      .title{
        font-size: 64rpx;
        font-weight: 500;
        line-height: 75rpx;
      }
      .text{
        font-size: 30rpx;
        line-height: 35rpx;
        margin-top: 10rpx;
      }
    }
    .content{
      .title{
        height: 120rpx;
        line-height: 120rpx;
        background: #F5F6F7;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        padding: 0 60rpx;
        font-size: 30rpx;
        font-weight: 500;
      }
      .form{
        padding: 0 60rpx;
        background-color: #fff;
        .form-item{
          display: flex;
          padding: 32rpx 0;
          border-bottom: 2rpx solid #E2E0E1;;
          .label{
            font-size: 36rpx;
            font-weight: 400;
            width: 164rpx;
            border-right: 1px solid #E2E0E1;
          }
          input{
           padding:0 20rpx;
          }
        }
        .btn{
          margin-top: 60rpx;
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          background: #16D998;
          border-radius: 60rpx 60rpx 60rpx 60rpx;
          font-size: 30rpx;
          font-weight: 500;
        }
        .about{
          margin-top: 30rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #909399;
          line-height: 30rpx;
        }
      }
    }
  }
</style>